<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模板语法</title>
		<!-- 引入vue -->
		<script src="../../js/vue.js"></script>
		<style>
			* {
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<!-- 
		vue模板语法有两大类：
		1.插值语法：
		  功能:用于解析标签体内容。
			写法:{{xxx}}，xxx是js表达式，可以直接读取data中的所有属性。
		2.指令语法：
		 -->
		<!-- 准备好一个容器 -->
		<div id="root">
			<h1>插值语法</h1>
			<h3>你好~{{name}}</h3>
			<h3>{{school}}</h3>
			<h3>{{arr}}</h3>

			<h1>指令语法</h1>
			<a v-bind:href="school.url">点击我去百度</a>
			<!-- 缩写形式 -->
			<a :href="school.url">点击我去百度</a>
		</div>
		<script>
			//阻止Vue在启动的时候生成生产提示
			Vue.config.productionTip = false;
			//创建Vue实例
			new Vue({
				el: '#root',
				data: {
					//普通属性
					name: 'jack',
					//对象
					school: {
						address: '山西省朔州市',
						numbers: 2000,
						url: 'https://www.baidu.com'
					},
					arr: [1, 2, 3, 'jack', 4]
				}
			});
		</script>
	</body>
</html>